<template>
  <setting-item-box name="图标尺寸">
    <n-input-number
        v-model:value="chartAttr.size"
        :disabled="isGroup"
        :min="0"
        placeholder="px"
        size="small"
    >
      <!--      <template #prefix>-->
      <!--        <n-text depth="3">{{ $t('style.Width') }}</n-text>-->
      <!--      </template>-->
    </n-input-number>
    <!--    <n-input-number-->
    <!--      v-model:value="chartAttr.h"-->
    <!--      :min="50"-->
    <!--      :disabled="isGroup"-->
    <!--      size="small"-->
    <!--      placeholder="px"-->
    <!--    >-->
    <!--      <template #prefix>-->
    <!--        <n-text depth="3">{{ $t('style.Height') }}</n-text>-->
    <!--      </template>-->
    <!--    </n-input-number>-->
  </setting-item-box>
  <setting-item-box :alone="true" name="旋转角度">
    <div class="slider-demo-block">
      <el-slider v-model="chartAttr.rotate" :disabled="isGroup" :max="360" :min="0" show-input size="small"/>
    </div>
  </setting-item-box>
</template>

<script lang="ts" setup>
import {PropType} from 'vue'
import {PickCreateComponentType} from '@/packages/index.d'
import {SettingItemBox} from '@/components/Pages/ChartItemSetting'

const props = defineProps({
  chartAttr: {
    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
    required: true
  },
  isGroup: {
    type: Boolean,
    required: false
  }
})
</script>

<style lang="scss" scoped>
.slider-demo-block {
  display: flex;
  align-items: center;
}

.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
</style>
